<template>
  <div class="app">
    <Editor v-model="state" @sendJsonData="recesive"></Editor>
  </div>
</template>

<script>
import {
  ElButton,
  ElInput,
  ElSelect,
  ElOption,
  ElDatePicker,
  ElCheckboxGroup,
  ElCheckbox,
  ElTable,
  ElTableColumn,
  ElPagination,
  ElNotification,
  ElIcon,
  ElMessage,
} from "element-plus";
import { ref, provide, onUnmounted, onMounted } from "vue";
import data from "./data.json";
import Editor from "./packages/editor.jsx";
import { registerConfig as config } from "./utils/editor-config";
export default {
  name: "home",
  components: {
    Editor,
  },
  setup() {
    const state = ref(data);

    provide("config", config); // 将组件的配置直接传到子子孙孙组件
    // onMounted(() => {
    //   // 获取整个网页的宽度（包括滚动条）
    //   var pageWidth = Math.max(
    //     document.body.scrollWidth,
    //     document.documentElement.scrollWidth,
    //     document.body.offsetWidth,
    //     document.documentElement.offsetWidth,
    //     document.documentElement.clientWidth
    //   );
    //   // 获取整个网页的高度（包括滚动条）
    //   var pageHeight = Math.max(
    //     document.body.scrollHeight,
    //     document.documentElement.scrollHeight,
    //     document.body.offsetHeight,
    //     document.documentElement.offsetHeight,
    //     document.documentElement.clientHeight
    //   );
    //   if (pageWidth >= state.value.container.minWidth) {
    //     state.value.container.width = pageWidth-20;
    //   }
    //   if (pageHeight >= state.value.container.minHeight) {
    //     state.value.container.height = pageHeight;
    //   }
    // });
    //接收导入的json文件覆盖全局
    const recesive=(val)=>{
      state.value=val
      ElMessage("文件导入成功，修改时不可刷新页面否者需重新导入！");
    }
    return {
      state,
      recesive
    };
  },
};
</script>
<style lang="scss" scoped>
</style>
